<template>
  <!-- 页面主体 -->
  <div class="layout main">
    <!-- 焦点图 -->
    <div class="focus">
      <img src="../assets/images/manufacture/模具制造标题图.png" alt="" />
    </div>
    <!-- 模具制造 -->
    <div class="container">
      <div class="cont_hd">
        {{ $tc("content.News") }}
        <el-breadcrumb separator-icon="ArrowRight">
          <el-breadcrumb-item>{{ $tc("manufacture.crumbs") }}</el-breadcrumb-item>
          <el-breadcrumb-item><a href="javascript:;">{{ $tc("manufacture.title") }}</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 分割线 -->
      <el-divider border-style="dotted"></el-divider>
      <!-- 内容展示 -->
      <div class="cont_bd">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
          :tab-position="direction"
          :stretch="true"
        >
          <el-tab-pane :label="$tc('manufacture.subtitle', 0)" name="first">
            <div class="cont_bd_title">
              <p class="dot">·</p>
              <p class="title_info">{{ $tc("manufacture.subtitle", 0) }}</p>
            </div>
            <div class="cont_bd_block">
              <p class="block_description" v-t="{ path: 'manufacture.technology' }"></p>
              <div class="block">
                <el-carousel trigger="click" height="150px">
                  <el-carousel-item v-for="item in imgArr[0]" :key="item">
                    <img :src="item" alt="" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$tc('manufacture.subtitle', 1)" name="second">
            <div class="cont_bd_title">
              <p class="dot">·</p>
              <p class="title_info">{{ $tc("manufacture.subtitle", 1) }}</p>
            </div>
            <div class="cont_bd_block">
              <p class="block_description" v-t="{ path: 'manufacture.quality' }"></p>
              <div class="block">
                <el-carousel trigger="click" height="150px">
                  <el-carousel-item v-for="item in imgArr[1]" :key="item">
                    <img :src="item" alt="" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$tc('manufacture.subtitle', 2)" name="third">
            <div class="cont_bd_title">
              <p class="dot">·</p>
              <p class="title_info">{{ $tc("manufacture.subtitle", 2) }}</p>
            </div>
            <div class="cont_bd_block">
              <p class="block_description" v-t="{ path: 'manufacture.equipment' }"></p>
              <div class="block">
                <el-carousel trigger="click" height="150px">
                  <el-carousel-item v-for="item in imgArr[2]" :key="item">
                    <img :src="item" alt="" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$tc('manufacture.subtitle', 3)" name="fourth">
            <div class="cont_bd_title">
              <p class="dot">·</p>
              <p class="title_info">{{ $tc("manufacture.subtitle", 3) }}</p>
            </div>
            <div class="cont_bd_block">
              <p class="block_description" v-t="{ path: 'manufacture.system' }"></p>
              <div class="block">
                <el-carousel trigger="click" height="150px">
                  <el-carousel-item v-for="item in imgArr[3]" :key="item">
                    <img :src="item" alt="" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { onMounted, watch } from '@vue/runtime-core';
export default {
  name: 'Manufacture',
  setup() {
    const activeName = ref("first");
    const imgArr = reactive([
      [
        require("../assets/images/manufacture/技术研发1.png"),
        require("../assets/images/manufacture/技术研发2.png"),
        require("../assets/images/manufacture/技术研发3.png"),
        require("../assets/images/manufacture/技术研发4.png"),
        require("../assets/images/manufacture/技术研发5.png"),
      ],
      [
        require("../assets/images/manufacture/质量保证(中文).png"),
        require("../assets/images/manufacture/质量保证2.png"),
      ],
      [
        require("../assets/images/manufacture/设备1.png"),
        require("../assets/images/manufacture/设备2.png"),
        require("../assets/images/manufacture/设备3.png"),
        require("../assets/images/manufacture/设备4.png"),
        require("../assets/images/manufacture/设备5.png"),
      ],
      [
        require("../assets/images/manufacture/系统支持1.png"),
        require("../assets/images/manufacture/系统支持2.png"),
      ],
    ]);

    const direction = ref('right')
    const screenWidth = ref(null);

    onMounted(() => {
      screenWidth.value = document.body.clientWidth;
      window.onresize = () => {   //屏幕尺寸变化就重新赋值
        return (() => {
          screenWidth.value = document.body.clientWidth
        })()
      }
    })

    watch(screenWidth, (val) => {
      if (val <= 1199) {
        console.log('屏幕宽度小于1200');
        direction.value = 'top'
      } else {
        console.log('屏幕宽度大于1200px')
        direction.value = 'right'
      }
    })

    // DELETE 可删除的方法
    const handleClick = (tab, event) => {
      console.log(tab, event);
    };

    return {
      activeName,
      imgArr,
      direction,
      screenWidth,
      handleClick,
    };
  },
};
</script>
<style lang="less">
@import url("../assets/css/manufacture");
</style>